{extend name="layout/iframe_layout" /}

{block name="title"}管理员管理{/block}
{block name="style"}
<style>

</style>
{/block}

{block name="content"}

<div id="app" >
    <div class="app-container" >
         {include file="public/search_form" /}

        <div class="action-btns">
            <el-button-group>
                <el-button type="info" size="mini" icon="el-icon-refresh" @click="search">刷新</el-button>
                <el-button type="success" size="mini" icon="el-icon-plus" @click="openDialog">新增
                </el-button>

            </el-button-group>
            <el-button-group>
                <el-button type="primary" size="mini" icon="el-icon-menu" @click="showColumnSetting = true">字段配置</el-button>
            </el-button-group>

        </div>
        <el-table
                ref="multipleTable"
                v-loading="listLoading"
                :data="list"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
                tooltip-effect="dark"
                style="width: 100%"
                align="center"
                @selection-change="handleSelectionChange"
        >
            <!--      <el-table-column type="selection" width="55" align="center" prop="id"/>-->
             {include file="public/table_column" /}
            <el-table-column align="center" prop="created_at" label="操作" fixed="right" width="130">
                <template v-slot:default="{scope,row}">
                    <el-row type="flex" justify="space-around">
                        <el-button
                                size="mini"
                                type="primary"
                                title="修改"
                                icon="el-icon-edit"
                                circle
                                @click="editData(row)"
                        ></el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>

         <!-- 字段设置对话框 -->
        {include file="public/show_column_setting" /}
        <!--分页-->
        {include file="public/pagination" /}
    </div>

    <!-- 弹窗：新增/编辑 -->
    <el-dialog
            :title="form.role_id ? '编辑' : '新增'"
            :visible.sync="dialogVisible"
            width="600px"
            top="5vh"
            :close-on-click-modal="false"
            append-to-body
    >
        <el-form :model="form" label-width="100px">
            <el-form-item label="角色" required>
                <el-select v-model="form.role_id" placeholder="请选择" style="width: 100%">
                    <el-option label="超级管理" value=""></el-option>
                    <el-option
                            v-for="(item,index) in option_list"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="登录账号" required>
                <el-input v-model="form.username" autocomplete="off" placeholder="请输入"  />
            </el-form-item>
            <el-form-item label="真实姓名" >
                <el-input v-model="form.real_name" autocomplete="off" placeholder="请输入"  />
            </el-form-item>
            <el-form-item label="密码" >
                <el-input v-model="form.password" autocomplete="off" placeholder="请输入"  />
            </el-form-item>
            <el-form-item label="禁用" >
              <el-switch v-model="form.is_disable" active-value="1" inactive-value="0" ></el-switch>
            </el-form-item>
            <el-form-item label="备注" >
                <el-input type="textarea" rows="2" v-model="form.remark" autocomplete="off" placeholder="请输入"  />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveData">保存</el-button>
        </div>
    </el-dialog>
</div>
{/block}

{block name="script"}
<script>
     Vue.mixin(commonMethods);//引入公共方法
  var api_base = '/admin';
  new Vue({
    el: '#app',
    data() {
      return {
        dialogVisible: false,
        form: {
          admin_id: 0,
          role_id: 0,
          username: '',
          real_name: '',
          password: '',
          is_disable: 0,
          remark: '',
        },
        option_list:[],

        listQuery: {
          page: 1,
          limit: 10
        },
        search_fields: [],
        multipleSelection: [],
        el_table_column: [],
        list: null,
        listLoading: true,
        total: 0,
        searchForm: {
          type: '',
          keyword: '',
          sort: '',
          created_time: ''
        },

        isAllChecked: true, // 是否全选
        isIndeterminate: true, // 全选框是否为不确定状态
        checkList: [], // 选择的字段名称（标签）
        showColumnSetting: false,
        visibleColumns: [] // 当前显示的列配置
      };
    },
    methods: {
      //下拉选项
      listOptions() {
        this.listLoading = true
        get('/role/list_options').then(res => {
          if (res.code === 0){
            this.option_list = res.data.list
          }
        })
      },
      openDialog() {
        Object.keys(this.form).forEach(key => this.form[key] = '');
        this.dialogVisible = true;
      },
      editData(row) {
        this.form = Object.assign({}, row);
        if (!this.form.role_id){
            this.form.role_id = ''
        }
        this.dialogVisible = true;
      },
      saveData() {
        if (!this.form.admin_id && !this.form.password) {
          this.$message.error('请填写登录密码');
          return;
        }
        (this.form.role_id ? put(api_base + '/save', this.form) : post(api_base + '/save', this.form))
                .then(res => {
                  if (res.code != 0) {
                    this.$message.error(res.msg || '保存失败');
                    return;
                  }
                  this.$message.success(this.form.admin_id ? '已更新' : '已新增');
                  this.dialogVisible = false;
                  this.fetchData(true);
                }).catch(error => {
          console.error('保存功能失败:', error);
        });
      }
    },
    mounted() {
      this.fetchListConfig();
      this.fetchData();
      this.listOptions();
    }
  });
</script>
{/block}
